<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="shortcut icon" href="favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>登录</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/static/admin/css/bootstrap.min.css?v=3.3.6">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="/static/admin/js/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/static/admin/js/bootstrap.min.js"></script>
    <!-- Sweet Alert -->
    <link href="/static/admin/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <script src="/static/admin/js/plugins/sweetalert/sweetalert.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <br>
    <br>

    <p class="text-center">
        <img width="60%"  src="__IMG__/news_logo.gif">
    </p>

    <form id="signupForm" class="form-horizontal text-center" role="form" method="post" onsubmit="return toVaild()">
        <div class="form-group">
            <label class="col-xs-3 control-label text-right">手机号：</label>
            <div class="col-xs-7">
                <input type="tel" class="form-control" id="phone" name="phone" placeholder="">
            </div>
        </div>
        <div class="form-group">
            <label class="col-xs-3 control-label text-right">密  码：</label>
            <div class="col-xs-7">
                <input type="password" maxlength="12" class="form-control" id="psw" name="psw" placeholder="">
            </div>
        </div>
        <div class="form-group">
            <label class="col-xs-3 control-label text-right">验证码：</label>
            <div class="col-xs-3" style="padding-right: 0px">
                <input type="text" maxlength="4" class="form-control" placeholder="验证码"  name="code"/>
            </div>
            <div class="col-xs-4">
                <img src="{:url('checkVerify')}" onclick="javascript:this.src='{:url('checkVerify')}?tm='+Math.random();" />
            </div>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-success btn-lg">登录</button>
            <a href="{:url('register')}" class="btn btn-primary btn-lg">注册</a>
        </div>
    </form>

    <br>
    <br>
</div>
<script>
    // 手机号码验证
    function isMobile(value) {
        var length = value.length;
        var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
        return (length == 11 && mobile.test(value));
    }

    function toVaild(){
        if(!isMobile($('#phone').val())) {
            swal("请输入正确的手机号码!", "", "error");
            return false;
        }
        if($('#psw').val().length < 8) {
            swal("密码长度在8到12位之间!", "", "error");
            return false;
        }
        var url = "./index";
        $.ajax({
            type:"POST",
            url:url,
            cache: false,
            data: new FormData($('#signupForm')[0]),
            processData: false,
            contentType: false,
            beforeSend:function(){
            },
            error: function(request) {
                swal("网络错误!", "", "error");
            },
            success: function(data) {
                //关闭加载层
                if(data.code == 1){
                    swal({
                        title: data.msg,
                        text: '',
                        type: "success",
                        showCancelButton: false,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "ok",
                        closeOnConfirm: false,
                        html: false
                    }, function(){
                        window.location = document.referrer;
                    });
                }else{
                    swal(data.msg, "", "error");
                }
            }
        });
        return false;
    }
</script>
</body>
</html>